import React, { useState, useEffect, useReducer,useRef } from 'react'
import Home from './components/Home/Home'
import NavBar from './components/NavBar/NavBar';
import axios from 'axios'
export default function App(props) {
  console.log('6', props);
  const [title, setState1] = useState('')
  const [filmes, setState2] = useState([])
  const [count1, setCount] = useState(1);
  let timer = useRef()
  useEffect(()=>{
    timer.current = setInterval(()=>{
        console.log(count1)
    }, 1000)
  }, [count1])
  function click() {
    clearInterval(timer.current)
    setCount(2)
  }
  const changeTitle = () => { 
    setState1((a) => {
      console.log(a === '');
      return a + 'hello lisi'
    })
  }
  const nav = React.createRef()
  const [count, dispatch] = useReducer((prevState, action) => {
    console.log('action', action);
    let res
    switch (action.type) {
      case 'jia': res = prevState + 1; break;
      case 'jian': res = prevState - action.data; break;
      default: res =  prevState
    }
    return res
  }, 1)
  const addHandler = () => {
    dispatch({type: 'jia'})
  }
  const jianHandler = () => {
    dispatch({type: 'jian', data: 2})
  }
  useEffect(() => { 
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=5762832',
      headers: {
        'X-Client-Info': '{"a": "3000","ch": "1002","v": "5.2.0","e": "16526938643504693313537","bc": "440300"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => { 
     
      const { films } = res.data.data
      setState2(films)
    })
  }, [])
  return (
    <div>
      <h1>App</h1>
      <button onClick={click}>点击打印</button>
      <div>count：{ count }</div>
      <button onClick={addHandler}>+</button>
      <button onClick={jianHandler}>-</button>
      <div>
        <h4>
        Home组件
        
        </h4>
        <Home></Home>
      </div>
      <hr />
      <div>
        <h4>NavBar组件</h4>
        <NavBar  films={ filmes } title={ title } changeTitle={changeTitle} ref={ nav }></NavBar>
        <button onClick={() => nav.current.say()}>调用子组件的say方法</button>
      </div>
      
    </div>
  )
}
